import Layouts from '@/src/components/Layouts'
import React, { useState, useEffect } from 'react'
import { Card, Button, Table, Space, Popconfirm, message } from "antd"
import AuditSearch from '@/src/components/AuditSearch'
import Paginations from '@/src/components/Pagination'
import http from '@/src/utils/https'
const Audit = () => {
  //分页
  let [page, setPage] = useState(1);
  let [pagesize, SetpageSize] = useState(10);
  let [total, SetTotal] = useState(100);
  //页码改变
  const handelpage = (page: number, pagesize: number) => {
    // console.log(page, pagesize, "page")
    setPage(page)
    SetpageSize(pagesize)
  }
  //条数改变
  const handelsize = (page: number, pagesize: number) => {
    // console.log(page, pagesize, "size")
    setPage(page)
    SetpageSize(pagesize)
  }


  let [timer, setTimer] = useState(false)
  //获取审核列表
  const getAuditList = (obj = {}) => {
    //设定一个节流，防止重复请求
    if (timer) return
    http.get("/audit", { params: obj }).then(res => {
      console.log(res, "audit")
      if (res.data.code == 200) {
        //设置初始数据
        setAuditList(res.data.data)
        //设置总页码
        SetTotal(res.data.data.length)
      }
      setTimer(false)
    })
    setTimer(true)
  }


  //初始化请求数据
  let [auditList, setAuditList] = useState([] as any)
  //初始化渲染数据
  let [auditLists, setAuditLists] = useState([] as any)
  useEffect(() => {
    if (auditList.length <= 0) {
      getAuditList()
    }
  }, [])
  //设置处理渲染数据
  useEffect(() => {
    if (auditList.length > 0) {
      //处理数据
      let newList = auditList.slice((page - 1) * pagesize, page * pagesize).map((item: any) => {
        item.key = item.id
        return item
      })
      // console.log(newList, "list")
      setAuditLists(newList)
    }
  }, [auditList, page, pagesize])

  //多选
  const [selectedRowKeys, setSelectedRowKeys] = useState([] as any);
  const onSelectChange = (newSelectedRowKeys: any) => {
    console.log('selectedRowKeys changed: ', newSelectedRowKeys);
    setSelectedRowKeys(newSelectedRowKeys);
  };
  const selectobj = {
    //多选列表
    selectedRowKeys,
    //多选事件
    onChange: onSelectChange
  } as any;
  //模糊搜索
  const handelsearch = (val: any) => {
    getAuditList({ name: val.username })
  }
  //审核
  const editaudit = async (item:any) =>{
    let state = '已审核'
    if(item.state !== '未审核'){
      state = '未审核'
    }
    let res = await http.post("/set/audit",{state,id:item.id});
    if(res.data.code==200){
      getAuditList()
    }
  }
  //多选审核
  const handelok = () =>{
    let pparr = selectedRowKeys.map((item:any)=>{
        return auditLists.find((val:any)=>val.id==item) 
     })
    pparr.map( async (item:any)=>{
      let res = await http.post("/set/audit",{state:"已审核",id:item.id});
      if(res.data.code==200){
        getAuditList()
      }
    })
  }
  const handelno = () =>{
    let pparr = selectedRowKeys.map((item:any)=>{
      return auditLists.find((val:any)=>val.id==item) 
   })
  pparr.map( async (item:any)=>{
    let res = await http.post("/set/audit",{state:"未审核",id:item.id});
    if(res.data.code==200){
      getAuditList()
    }
  })
  }

  //删除
  const handelete = async (id:any) =>{
    let res = await http.delete("/del/audit",{params:{id}})
    if(res.data.code==200){
      getAuditList()
    }
  }
  //多选删除 
  const handeldel = () => {
    selectedRowKeys.map((item:any)=>{
      handelete(item)
    })
  }

   //数据分类
  let columns = [
    {
      title: '序号',
      dataIndex: 'id',
      key: 'id',
      width: 70
    },
    {
      title: '小区名称',
      dataIndex: 'name',
      key: 'name',
      width: 100
    },
    {
      title: '标题',
      dataIndex: 'title',
      key: 'title',
      width: 180
    },
    {
      title: '面积',
      dataIndex: 'area',
      key: 'area',
      render(_: any, item: any) {
        return <>
          <span>{item.area}/㎡</span>
        </>
      },
      width: 70
    }, {
      title: '总价',
      dataIndex: 'total_prices',
      key: 'total_prices',
      width: 70
    },
    {
      title: '排序',
      dataIndex: 'rank',
      key: 'rank',
      width: 70
    },
    {
      title: '状态',
      dataIndex: 'state',
      key: 'state',
      width: 120,
      render(_: any, item: any) {
        return <>
          {
            item.state == '未审核' ?
              <span style={{ color: "orange" }}>未审核</span> :
              <span style={{ color: "cadetblue" }}>已审核</span>
          }
        </>
      },
    }
    ,
    {
      title: '操作',
      dataIndex: 'edit',
      key: 'edit',
      render: (_: any, item: any) => {
        return <div className='edit_btn'>
          <Space>
            <Button type="link"
              onClick={()=>editaudit(item)}
            >  {item.state == "未审核" ? '审核' : '不审核'}  </Button>
            <Button type="link">编辑</Button>
            <Popconfirm
              title="删除"
              description="你确定要删除吗"
              // onConfirm={() => }
              okText="Yes" cancelText="No">
              <Button type="link" onClick={()=>handelete(item.id)} >删除</Button>
            </Popconfirm>
          </Space>
        </div>
      },
      width: 180
    }
  ]
  return (
    <Layouts>

      <Card style={{ width: "100%" }} bordered={false}>
        <h2>审核管理</h2>
      </Card>
      <Card style={{ width: "100%" }} bordered={false} title="搜索">
        <AuditSearch handelsearch={handelsearch}></AuditSearch>
      </Card>
      {
        selectedRowKeys.length > 0 &&
        <Card style={{ width: "100%" }} bordered={false}>
          <Space>
            <Button type="default" onClick={handelok}>审核通过</Button>
            <Button type="primary" onClick={handelno}>审核未通过</Button>
            <Button type="primary" danger onClick={handeldel}>删除</Button>
          </Space>
        </Card>
      }
      <Card style={{ width: "100%" }} bordered={false}>
        <Table rowSelection={selectobj} scroll={{ y: 540 }} style={{ height: 540, marginBottom: "10px" }}
          pagination={false} dataSource={auditLists} columns={columns}
        />
      </Card>
      <Card bordered={false} style={{ width: '100%', position: "sticky", left: "0", bottom: "0", zIndex: "9", minWidth: "800px", borderTop: "1px solid #ccc" }}>
        <Paginations total={total} page={page} pagesize={pagesize} onpage={handelpage} onsize={handelsize}></Paginations>
      </Card>
    </Layouts>
  )
}

export default Audit